@charset "UTF-8";
@import "../../variable";

.container {
  .appbar {
    z-index: 1;
    position: fixed;
    top: 0;
    .arrow-left {
      display: flex;
      justify-content: center;
      align-items: center;
      .box {
        padding: rpx(18);
        border-radius: 50%;
        background-color: rgba(136, 136, 136, 0.36);
      }
    }
  }

  // 图片
  .images {
    height: rpx(500);
    .slide-image {
      background-color: $bg-color;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
    }
  }

  .detail {
    margin-left: $box-width;
    margin-right: $box-width;
    padding-bottom: $box-width;
    border-bottom: $line;
    // 信息
    .head {
      margin-bottom: $box-width;
      .image {
        margin-right: $box-width;
        position: relative;
        z-index: 1;
        margin-top: rpx(-50);
        flex-shrink: 0;
        width: rpx(150);
        height: rpx(150);
        padding: rpx(5);
        background-color: #fff;
        border: rpx(1) solid #D0D0D1;
      }
      .content {
        .row {
          justify-content: space-between;
          align-items: center;
          .title {
            @include max-line(1);
            font-weight: 500;
          }
          .datetime {
            font-size: 9pt;
            color: #B5B5B5;
            display: flex;
            align-items: center;
            justify-content: center;
            .icon-clock {
              display:inherit;
              margin-right: rpx(5);
            }
          }
        }
        .summary {
          @include max-line(2);
          font-size: 9pt;
          font-weight: 300;
          color: #959599;
          text-align: justify;
        }
      }
    }

    .body{
      margin-bottom: $box-width;
      justify-content: space-between;
      align-items: center;
      .user {
        font-size: 9pt;
        font-weight: 400;
        align-items: center;
        color: #959599;
        .user-avatar {
          height: 25px;
          width: 25px;
          margin-right: rpx(15);
          border-radius: 50%;
          background-color: $bg-color;
        }
        .user-name {
          font-weight: 500;
          font-size: 10pt;
          color: #000;
        }
      }
      .control {
        .btn {
          background-color: $theme-color;
          padding: rpx(5) rpx(30);
          font-weight: 500;
          color: #fff;
          border-radius: rpx(50);
          font-size: 10pt;
          margin: 0 rpx(15);
          box-shadow: $theme-shadow;
        }
      }
    }

    .footer {
      margin-bottom: $box-width;
      font-size: 11pt;
      font-weight: 300;
      text-align: justify;
    }

    .toolbar {
      justify-content: space-between;
      align-items: center;
      .status {
        font-size: 10pt;
        color: #959599;
        .icon {
          color: $theme-color;
          margin-right: rpx(12);
        }
      }
      .btn {
        padding: rpx(20);
        color: #959599;
        border: $line;
        border-radius: 10%;
        margin: 0 rpx(10);
      }
    }
  }

  .discussion {
    text-align: center;
    margin: rpx(40) $box-width;
  }
}